<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>加载模型</title>
    <style>
        body {
            margin: 0;
            /* 隐藏body窗口区域滚动条 */
            overflow: hidden;
        }
    </style>
</head>

<body>
    <input type="range" name="slider" min="1" max="100" step="1" value="0"
        style="position: absolute; top: 10px;left: 10px;" />
    <script src="static/js/main.js"></script>
    <script type="module">
        import * as THREE from 'https://cdn.skypack.dev/three@v0.130.1'
        import { OrbitControls } from 'https://cdn.skypack.dev/three@v0.130.1/examples/jsm/controls/OrbitControls.js'
        import { GLTFLoader } from 'https://cdn.skypack.dev/three@v0.130.1/examples/jsm/loaders/GLTFLoader.js'
        import { STLLoader } from 'https://cdn.skypack.dev/three@v0.130.1/examples/jsm/loaders/STLLoader.js'
        import { OBJLoader } from 'https://cdn.skypack.dev/three@v0.130.1/examples/jsm/loaders/OBJLoader.js'
        import { MTLLoader } from 'https://cdn.skypack.dev/three@v0.130.1/examples/jsm/loaders/MTLLoader.js'
        import { FBXLoader } from 'https://cdn.skypack.dev/three@v0.130.1/examples/jsm/loaders/FBXLoader.js'
        /** 创建场景对象Scene */
        let scene = new THREE.Scene();
        let axisHelper = new THREE.AxesHelper(250);
        scene.add(axisHelper);
        /** 光源设置  */
        //点光源
        let point = new THREE.PointLight(0xffffff)
        point.position.set(400, 200, 300); //点光源位置
        scene.add(point); //点光源添加到场景中
        //环境光
        let ambient = new THREE.AmbientLight(0x888888)
        scene.add(ambient)
        /** 相机设置  */
        let width = window.innerWidth; //窗口宽度
        let height = window.innerHeight; //窗口高度
        let k = width / height; //窗口宽高比
        let s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
        //创建相机对象
        let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        // camera = new THREE.PerspectiveCamera(60, k, 1, 1000)
        camera.position.set(0, 200, 600); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

        /** 创建渲染器对象 */
        let renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);//设置渲染区域尺寸
        renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
        document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

        let stlLoader = new STLLoader()
        stlLoader.load('static/model/box.stl', function(geometry) {
           console.log(geometry.toJSON())
            let mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
                color: 0x44dd44,
                // side: THREE.DoubleSide,
            })); //网格模型对象
            scene.add(mesh)
        })

        let mtlLoader = new MTLLoader();
        let objLoader = new OBJLoader()
        mtlLoader.load("static/model/nanosuit/nanosuit.mtl", function(mtl) {
            objLoader.setMaterials(mtl)
            objLoader.load("static/model/nanosuit/nanosuit.obj", function(obj){
                scene.add(obj)
                obj.position.set(100, 0, 0)
                obj.scale.set(10, 10, 10)
            })
        })

        let mixer = null
        // let fbxLoader = new FBXLoader()
        // fbxLoader.load("static/model/anima.fbx", function(obj){
        //     scene.add(obj)
        //     obj.position.set(200, 0, -200)
        //     obj.scale.set(0.1, 0.1, 0.1)
        //     mixer = new THREE.AnimationMixer(obj)
        //     console.log(obj)
        //     let animationAction=mixer.clipAction(obj.animations[5])
        //     animationAction.timeScale = 1; //默认1，可以调节播放速度
        //     // animationAction.loop = THREE.LoopOnce; //不循环播放
        //     // animationAction.clampWhenFinished=true;//暂停在最后一帧播放的状态
        //     animationAction.play()
        // })

        const glftLoader = new GLTFLoader()
        glftLoader.load("static/model/light_tank_lt-521/scene.gltf", function(gltf) {
            let scene_ = gltf.scene
            scene_.children[0].position.set(-400, 0, 0)
            scene.add(scene_)
        }, undefined, function ( error ) {
            console.error( error );
        })

        glftLoader.load("static/model/spidertank__lowpoly/scene.gltf", function(gltf) {
            let scene_ = gltf.scene
            console.log(scene_.children)
            scene_.children[0].position.set(400, 0, 0)
            scene_.children[0].scale.set(100, 100, 100)
            scene_.children[0].rotateZ(- Math.PI / 2)
            scene.add(scene_)
        }, undefined, function ( error ) {
            console.error( error );
        })

        
        glftLoader.load("static/model/anima.gltf", function(gltf) {
            let scene_ = gltf.scene
            console.log(scene_)
            scene_.children[2].position.set(200, 0, 0)
            scene_.children[2].scale.set(10, 10, 10)
            // scene_.children[0].rotateZ(- Math.PI / 2)
            scene.add(scene_)
        }, undefined, function ( error ) {
            console.error( error );
        })
        
        window.onresize = function () {
            let width = window.innerWidth; //窗口宽度
            let height = window.innerHeight; //窗口高度
            renderer.setSize(width, height);//设置渲染区域尺寸

            k = width / height; //窗口宽高比
            //修改相机对象属性
            camera.left = -s * k
            camera.right = s * k
            camera.top = s
            camera.bottom = -s
            camera.aspect = k
            camera.updateProjectionMatrix()
        }

        let Game = {
            tickLength: 16, 				// 20Hz
            lastTick: performance.now(),	// 最后更新时间
            stopKey: 0,
            canvas: null,
            context: null,
        }
        // 创建一个时钟对象Clock
        let clock = new THREE.Clock()
        let analyser = null
        function render(tFrame) {
            if (tFrame === undefined) {
                tFrame = performance.now()
                Game.lastTick = performance.now()
            }
            let nextTick = Game.lastTick + Game.tickLength
            let tickNum = 0
            if (tFrame > nextTick) {
                tickNum = Math.floor((tFrame - Game.lastTick) / Game.tickLength)
            }
            Game.lastTick = tFrame
            if (mixer != null) {
                // clock.getDelta()方法获得两帧的时间间隔
                mixer.update(clock.getDelta())
            }
            //执行渲染操作   指定场景、相机作为参数
            renderer.render(scene, camera);
            Game.stopKey = requestAnimationFrame(render)
        }
        document.onkeydown = function (e) {
            e = e || window.event;  //标准化事件对象
            let t = e.target || e.srcElement;  //获取发生事件的元素，兼容IE和DOM
            if (e.code == "Space") {  // 按下空格键 开始/暂停
                if (audio.isPlaying) {
                    audio.stop()
                } else {
                    audio.play()
                }
                console.log("audio: " + audio.isPlaying)
            }
            console.log(e.code)
        }
        function getV(distance) {
            let g = 0.5
            let t = Math.sqrt(distance * 2 / 9)
            return g * t
        }
        render()
        const controls = new OrbitControls(camera, renderer.domElement);//创建控件对象
    // controls.addEventListener('change', render);
    </script>
</body>

</html>